<template>
    <div>
        <com-heard></com-heard>
        <div class="cons">
            <div class="jx-top pu-con">
                <p
                    v-for="(item, index) in navList"
                    :key="index"
                    :class="topIndex == index ? 'jx-top-on' : ''"
                    @click="onTopTab(item, index)"
                >
                    {{ item }}
                </p>
            </div>
            <div class="jx-con">
                <div class="jx-1 pu-con" v-if="newsList.length > 0">
                    <router-link
                        :to="{
                            path: '/jxdec',
                            query: { data: JSON.stringify(item) },
                        }"
                        v-for="(item, index) in newsList"
                        :key="index"
                    >
                        <img :src="prefixUrl + item.coverImageUrl" />
                        <span>
                            <p>{{ item.title }}</p>
                            <p v-if="item.status == 0">未开始</p>
                            <p v-if="item.status == 1">评审中</p>
                            <p v-if="item.status == 2">已结束</p>
                        </span>
                        <p>
                            申报时间：{{ item.startTime | pattime }} —
                            {{ item.endTime | pattime }}
                        </p>
                        <p>{{ item.createDate | angtime }}</p>
                    </router-link>
                </div>
                <div class="jx-1" v-else>
                    <p>暂无数据</p>
                </div>

                <div class="news-page">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="totalSum"
                        :page-size="sizeSum"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    ></el-pagination>
                </div>
            </div>
        </div>
        <com-foot></com-foot>
    </div>
</template>

<script>
import comHeard from "@/components/com-heard";
import comFoot from "@/components/com-foot";
import _ from "underscore";
import moment from "moment";
export default {
    components: {
        comHeard,
        comFoot,
    },
    filters: {
        pattime(value) {
            if (value) {
                return value.slice(0, 10);
            }
        },
        angtime(value) {
            if (value) {
                return moment(value).format("YYYY-MM-DD");
            }
        },
    },
    data() {
        return {
            prefixUrl: "",
            totalSum: 0,
            sizeSum: 30,
            topIndex: 0,
            navList: ["优秀广告作品奖", "品牌服务效能奖", "广告发布诚信单位"],
            newsList: [],
            type: "",
        };
    },
    created() {
        this.prefixUrl = this.$store.state.user.imgUrl;
        this.getpageAwardList(1, this.navList[0]);
        this.type = this.navList[0];
        this.topIndex = this.$route.query.type || 0;
    },
    mounted() {},
    methods: {
        async getpageAwardList(curIndex, type) {
            const data = { type: type, currentPage: curIndex, pageSize: 4 };
            const res = await this.$store.dispatch(
                "access/getpageAwardList",
                data
            );
            this.totalSum = res.totalCount;
            this.newsList = res.list;
            console.log(res);
        },
        onTopTab(data, index) {
            this.topIndex = index;
            this.type = data;
            this.getpageAwardList(1, data);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.getpageAwardList(val, this.type);
        },
    },
};
</script>

<style scoped>
@import "./jiangxiang.css";
</style>
